<template>
  <div class="page-header-index-wide">
    <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading" style="margin-top: 20px">
      <div class="salesCard">
        <a-tabs :tab-bar-style="{ paddingLeft: '12px'}" default-active-key="1" size="large">
          <a-tab-pane key="1" loading="true" tab="通知公告">
            <a-row align="middle" justify="space-around" style="background: white;padding: 20px 0" type="flex">
              <a-col :md="9" :sm="9">
                <div class="announce">
                  <div class="announce-item" v-for="(item, index) in dataList" v-if="index % 2 == 0">
                    <span class="redDot" v-if="formatGap(item.releaseDate, now) < 24"></span>
                    <span class="orangeDot" v-else></span>
                    <a class="announce-title" :href="item.originUrl" target="_blank">{{ item.title }}</a>
                    <span class="announce-new" v-if="formatGap(item.releaseDate, now) < 24">NEW</span>
                  </div>
                </div>
              </a-col>
              <a-col :md="9" :sm="9">
                <div class="announce">
                  <div class="announce-item" v-for="(item, index) in dataList" v-if="index % 2 !== 0">
                    <span class="redDot"></span>
                    <a class="announce-title" :href="item.originUrl" target="_blank">{{ item.title }}</a>
                    <span class="announce-new" v-if="formatGap(item.releaseDate, now) < 24">NEW</span>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading" style="margin-top: 20px">
      <div class="salesCard">
        <a-tabs :tab-bar-style="{ paddingLeft: '12px'}" default-active-key="1" size="large">
          <a-tab-pane key="1" loading="true" tab="整体情况">
            <a-row style="padding: 20px 0">
              <a-col v-if="barData!=null" :lg="12" :md="12" :sm="24" :xl="16" :xs="24">
                &nbsp;
                <!--                <div style="float: left;padding-top: 10px;margin-left:10px;width: 200px">本集团（企业）每月销售情况</div>-->
                <div class="radioGroup">
                  <a-radio-group v-model="switchValue" @change="onChange">
                    <a-radio-button value="1">能耗</a-radio-button>
                    <a-radio-button value="2">排放</a-radio-button>
                  </a-radio-group>
                </div>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="区域"
                             style="position:absolute;width: 200px;right:50px;top:0;float: left;z-index: 999">
                  <a-select
                    v-decorator="['registerDistinct', { rules: [{ required: true, message: '请选择区域' }] }]"
                    :defaultValue="selectArea" v-if="role !== 'district'"
                    placeholder="选择区域"
                    style="width: 100%"
                    @change="handleArea"
                  >
                    <a-select-option value="黄浦区">黄浦区</a-select-option>
                    <a-select-option value="徐汇区">徐汇区</a-select-option>
                    <a-select-option value="长宁区">长宁区</a-select-option>
                    <a-select-option value="静安区">静安区</a-select-option>
                    <a-select-option value="普陀区">普陀区</a-select-option>
                    <a-select-option value="虹口区">虹口区</a-select-option>
                    <a-select-option value="杨浦区">杨浦区</a-select-option>
                    <a-select-option value="闵行区">闵行区</a-select-option>
                    <a-select-option value="宝山区">宝山区</a-select-option>
                    <a-select-option value="嘉定区">嘉定区</a-select-option>
                    <a-select-option value="浦东新区">浦东新区</a-select-option>
                    <a-select-option value="金山区">金山区</a-select-option>
                    <a-select-option value="松江区">松江区</a-select-option>
                    <a-select-option value="青浦区">青浦区</a-select-option>
                    <a-select-option value="奉贤区">奉贤区</a-select-option>
                    <a-select-option value="崇明区">崇明区</a-select-option>
                  </a-select>
                  <div v-else style="width: 100px;text-align: center;"> {{ districtName }}</div>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="时间范围"
                             style="position:absolute;width: 250px;right:295px;top:0;float: left;z-index: 999">
                  <a-select
                    v-model="selectTime"
                    :defaultValue="selectTime"
                    placeholder="选择时间"
                    style="width: 100%"
                    @change="handleTime"
                  >
                    <a-select-option v-for="(item, index) in TimeList" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <!--                <bar-and-line :height="height"/>-->
                <bar-line-chart :height="height" :selectArea="selectArea" :selectTime="selectTime"
                                :switchValue="switchValue " />
              </a-col>

              <!--              </a-tabs>-->
              <a-col v-else :lg="12" :md="12" :sm="24" :xl="16" :xs="24">
                <span>暂无数据</span>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
                <!--                <div style="float: left;padding-top:10px;width: 200px">集团（企业）本市范围内销售量</div>-->
                <!--                <sell-pie title="销售占比" :height="height"></sell-pie>-->
                <!--                <a-row>-->
                <!--                  <a-col :xs="24" :sm="12">-->

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="年份"
                             style="position:absolute;width: 200px;right:50px;top:0;float: left;z-index: 999">
                  <!--                  v-decorator="['year', { rules: [{ required: true, message: '请选择年份' }] }]"-->
                  <a-select
                    v-model="selectYear"
                    :defaultValue="selectYear"
                    placeholder="选择年份"
                    style="width: 100%"
                    @change="handleYear"
                  >
                    <a-select-option v-for="(item, index) in yearList" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                    <!--                    <a-select-option value="2022">2022</a-select-option>-->
                    <!--                    <a-select-option value="2021">2021</a-select-option>-->
                    <!--                    <a-select-option value="2020">2020</a-select-option>-->
                  </a-select>
                </a-form-item>

                <!--                  </a-col>-->
                <!--                </a-row>-->
                <double-doughnut-chart :height="height" :selectArea="selectArea"
                                       :selectYear="selectYear"></double-doughnut-chart>

              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <info-edit ref="modalForm" @ok="modalFormOk"></info-edit>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Pie from '@/components/chart/Pie'
import CreditCorpPie from '@/components/chart/CreditCorpPie'
import ComplaintRecordPie from '@/components/chart/ComplaintRecordPie'
import SellPie from '@/components/chart/Sell-Pie'
import GoodModel from '@/components/chart/GoodModel'
import BarAndLine from '@/components/chart/BarAndLine'
import BarLineChart from '@/components/chart/BarLineChart'
import doubleDoughnutChart from '@/components/chart/doubleDoughnutChart'

import Trend from '@/components/Trend'
import { getLoginfo } from '@/api/api'
import { LACK, USER_INFO, ROLE } from '@/store/mutation-types'
import Vue from 'vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import InfoEdit from '@/components/tools/infoEdit.vue'
import { getAction } from '../../api/manage'

const rankList = [
  {
    name: '上海******服务有限公司',
    total: '51'
  },
  {
    name: '上海******服务有限公司',
    total: '42'
  },
  {
    name: '上海******服务有限公司',
    total: '36'
  },
  {
    name: '上海******服务有限公司',
    total: '21'
  },
  {
    name: '上海******服务有限公司',
    total: '10'
  }
]
const barData = []
export default {
  name: 'IndexChart',
  mixins: [JeecgListMixin],
  components: {
    InfoEdit,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Pie,
    ComplaintRecordPie,
    CreditCorpPie,
    SellPie,
    GoodModel,
    BarAndLine,
    BarLineChart,
    doubleDoughnutChart
  },
  data() {
    return {
      dotPosition: 'right',
      loading: true,
      center: null,
      rankList,
      barData,
      enterpriseNum: {},
      loginfo: {},
      visitFields: ['诉求量', '资讯量'],
      height: 500,
      visitInfo: [],
      labelCol: {
        xs: { span: 12 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 }
      },
      yearList: ['2022', '2021', '2020'],
      TimeList: ['年度', '月度'],
      selectArea: '黄浦区',
      year: '',
      switchValue: '1',
      selectYear: '2022',
      selectTime: '年度',
      indicator: '<a-icon type="loading" style="font-size: 24px" spin />',
      goodModel: [
        {
          name: '上海******服务有限公司',
          total: '100%'
        },
        {
          name: '上海******服务有限公司',
          total: '98%'
        },
        {
          name: '上海******服务有限公司',
          total: '97%'
        },
        {
          name: '上海******服务有限公司',
          total: '96%'
        },
        {
          name: '上海******服务有限公司',
          total: '95%'
        }
      ],
      goodClient: [
        {
          name: '上海******服务有限公司',
          total: '100%'
        },
        {
          name: '上海******服务有限公司',
          total: '98%'
        },
        {
          name: '上海******服务有限公司',
          total: '97%'
        },
        {
          name: '上海******服务有限公司',
          total: '96%'
        },
        {
          name: '上海******服务有限公司',
          total: '94%'
        }
      ],
      role: '',
      districtName: '',
      userInfo: {},
      dataList: [],
      now: ''
    }
  },
  created() {
    this.userInfo = Vue.ls.get(USER_INFO)
    let lack = Vue.ls.get(LACK)
    this.role = Vue.ls.get(ROLE)
    this.districtName = this.userInfo.realname
    if (this.role == 'district') {
      this.noEdit = true
      this.selectArea = this.districtName
    }
    setTimeout(() => {
      this.loading = !this.loading
      if (lack == true) {
        this.handleEdit()
      }
    }, 1000)
    this.initLogInfo()
    this.getList()
    //获取当前时间，以yyyy-MM-dd HH:mm:ss格式返回
    const timestamp = new Date().getTime()
    const date = new Date(timestamp)//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    const Y = date.getFullYear() + '-'
    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    this.now = Y + M + D + h + m + s
    console.log(this.now)
    // console.log(this.selectYear)
  },
  watch: {
    // logArea(val){
    //   console.log(val)
    // },
    selectYear(newval, oldval) {
      console.log(newval)
    },
    selectArea(newval, oldval) {
      console.log(newval)
    },
    selectTime(newval, oldval) {
      console.log(newval)
    },
    switchValue(newval, oldval) {
      console.log(newval)
    }
  },

//   watch(() => store.dbDoughnutYear, (newCount, oldCount) => {
//   // 调用某个方法
//   console.log(newCount)
//   if (newCount !== null) {
//     //调用重绘方法
//     getData()
//     setTimeout(() => {
//       resetChart()
//     }, 500)
//   }
// })
  methods: {
    formatGap(start, end) {
      // let staytimeGap = new Date().getTime() - new Date(start).getTime();
      let staytimeGap = new Date(end).getTime() - new Date(start).getTime()
      let stayHour = Math.floor(staytimeGap / (3600 * 1000))  // 小时
      let leave1 = staytimeGap % (3600 * 1000)
      let stayMin = Math.floor(leave1 / (60 * 1000))  // 分钟
      let leave2 = leave1 % (60 * 1000)
      let staySec = Math.floor(leave2 / 1000)   // 秒
      // return stayHour * 60 + stayMin
      // return stayHour + ':' + stayMin + ':' + staySec
      return stayHour
    },
    getList() {
      getAction('/cxm/cmsArticle/list1?channelId=公告').then((res) => {
        this.dataList = res.result.records
      })
    },
    initLogInfo() {
      let userinfo = Vue.ls.get(USER_INFO)
      let params = {
        enterpriseUscc: userinfo.enterpriseUscc
      }
      //接口占时注释
      // getRankList(params).then((res)=>{
      //   console.log(res)
      //   if(res.success){
      //     if(res.result!=null){
      //       this.rankList = res.result;
      //     }
      //   }
      // })
      // getSalesList(params).then((res)=>{
      //   console.log(res)
      //   if(res.success){
      //     if(res.result!=null){
      //       this.goodModel = res.result;
      //     }
      //   }
      // })
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
    },
    handleYear(value) {
      // console.log(value)
    },
    handleTime(value) {
      // console.log(value)
    },
    handleArea(value) {
      this.selectArea = value
      // console.log(this.selectArea)
    },
    onChange(e) {
      // console.log(`checked = ${e.target.value}`);
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card-body {
  padding: 24px 0;

  .acb-content {
    border-bottom: 1px solid #e8e8e8;

    .f-size {
      font-size: 32px;
      display: inline-block;
      padding-left: 25px;
    }

    .f-unit {
      font-size: 18px;
      display: inline-block;
      padding: 0 5px;
    }
  }

  .acb-date {
    font-size: 10px;
  }
}

.chart-card-title {
  font-size: 18px;
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量监测 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.announce {

  .announce-item {
    height: 40px;
    // 垂直居中
    display: flex;
    align-items: center;

    .orangeDot {
      background-color: #ff9a00;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 20px;
    }

    .redDot {
      background-color: #ff0000;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 20px;
    }

    .announce-title {
      color: #545456;
      font-size: 16px;
      font-weight: bold;
    }

    .announce-title:hover {
      text-decoration: underline;
    }

    .announce-new {
      margin-left: 10px;
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
  }

}

.radioGroup {
  width: 200px;
  float: left;
  position: absolute;
  right: 500px;
  top: 5px;
  z-index: 999;
}

/deep/ .ant-carousel .slick-slide {
  text-align: center;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}

// .ant-tabs-bar的第一个子元素
/deep/ .ant-tabs-bar:first-child {
  margin: 0;
}

</style>